<template>
  <section>
     <div class="contractContainer">
       <div class="contractTtitle">广 州 市 住 房 租 赁 合 同</div>
       <div class="landlordname company_name" v-if="+contractDetail.houseType === 2 || +contractDetail.apartment.houseType === 2 || +contractDetail.order.houseType === 2 || +contractDetail.housePersons.houseType === 2">
         <span class="company_label">出租人 :</span>
         <span class="company_content">广州城投住房租赁发展投资有限公司</span>
       </div>
       <div v-else class="landlordname">
         <span>出租人 :</span>
         <span class="inputlandlord">{{contractDetail.landlord.trueName}}</span>
       </div>
       <div class="tenantname">
         <span>承租人 :</span>
         <span class="inputtenant">{{contractDetail.renter.trueName}}</span>
       </div>
       <div class="officeHostFooter">
         <div class="footerLeft">
           <span>广州市住房和城乡建设委员会</span>
           <span>广州市工商行政管理局</span>
         </div>
          <div class="footerRight">制定</div>
       </div>
       <div class="footerDate">
         二〇一七年十月
       </div>
     </div>
  </section>
</template>
<script>
export default {
  props: ['contractDetail'],
  data () {
    return {}
  },
  methods: {}
}
</script>

<style lang="less" scoped>
.company_name {
      margin-bottom: 21px;
  .company_label {
    display: inline-block;
    width: 4rem;
    line-height: 1.5;
    float: left;

  }
  .company_content {
    width: ~"calc(100% - 5rem)";
    display: inline-block;
    line-height: 1.5;
    float: right;
    text-decoration: underline;
  }
}
  section{
    width: 100%;
    height:90%;
    line-height:1;
    overflow:hidden;
  }
  .contractContainer{
    position: relative;
  }
  .contractVersionNum{
    display:block;
    font-size:0.8rem;
  }
  .contractNumber{
    position: absolute;
     margin-top: 1.5rem;
     font-size:0.8rem;
     right:1rem;
  }
  .inputContractNum{
  display:inline-block;
   width: 5rem;
   height:0.8rem;    
   text-align: center;
    border-bottom: 1px solid black;
  }
  .contractTtitle{
    margin-top:3rem;
   margin-bottom:4.5rem;
   font-weight:700;
   font-size:1.25rem;
   text-align: center;
  }
  .landlordname,.tenantname{
    display:flex;
    width: 80%;
    height:3rem;
    margin-left:10%;
    line-height:0.8;
    font-size:1rem;
  }
  .inputlandlord,.inputtenant{
    display:inline-block;
     width: 70%;
     height:1rem;    
     text-align: center;
     border-bottom: 1px solid black;
  }
  .officeHostFooter{
    display:flex;
    flex-direction: row column;
    width: 80%;
    margin-left:17%;
    margin-top:15%;
    height: 30%;
    line-height: 2;
    font-size: 0.8rem;
  }
  .footerLeft{
    width:85%;
    height:100%;
  }
  .footerLeft>span{
    display:inline-block;
    /*letter-spacing:1px;*/
    width:100%;
    height:1px; 
  }
  .footerLeft>span:nth-child(2){
    letter-spacing:0.25rem
  }
  .footerRight{
    line-height: 4;
  }
.footerDate{
  margin-top:1rem;
  margin-bottom:1rem;
  text-align: center;
}
</style>

